<template>
  <div class="w100 h100" ref="chatAllowance">

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

import * as echarts from "echarts";
const chatAllowance = ref();
onMounted(() => {
  //   var chartDom = document.getElementById("main");

  var myChart = echarts.init(chatAllowance.value);
  var option;

  option = {
    //   title: {
    //   text: 'Referer of a Website',
    //   subtext: 'Fake Data',
    //   left: 'center'
    // },
    tooltip: {
      trigger: "item",
    },
    legend: {
      // 显示上方的颜色提示
      top: "5%",
      left: "center",
      show: true,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "55%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 0,
        },
        label: {
          show: true,
          // position: 'left'
          overflow:"none"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 1048, name: "财务部津贴" },
          { value: 735, name: "工艺技术部津贴" },
          { value: 580, name: "信息中心津贴" },
          { value: 484, name: "技术中心津贴" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped>
</style>